<template>
  <div>
    <!-- 微博注册的对话框 -->
    <el-dialog
      title="账号注册"
      :visible.sync="registerDialogFormVisible"
      @close="registerDialogClosed"
    >
      <el-form
        :model="registerForm"
        :rules="registerFormRules"
        ref="registerFormRef"
      >
        <el-form-item
          label="昵称"
          :label-width="formLabelWidth"
          prop="nickname"
        >
          <el-input
            v-model="registerForm.nickname"
            autocomplete="off"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="账号"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input
            v-model="registerForm.username"
            autocomplete="off"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="registerForm.password"
            autocomplete="off"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password2"
        >
          <el-input
            v-model="registerForm.password2"
            autocomplete="off"
            show-password
            placeholder="请再次输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="mail">
          <el-input
            v-model="registerForm.mail"
            autocomplete="true"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="12"
            ><div class="reset-wrap" @click="resetRegisterForm">
              <div class="reset">重置</div>
            </div></el-col
          ><el-col :span="12"
            ><div class="register-wrap" @click="registerUser">
              <div class="register">立即注册</div>
            </div></el-col
          ></el-row
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 控制注册表单的显示与否
  props: ["showRegisterDialog"],
  computed: {
    registerDialogFormVisible: {
      get() {
        return this.showRegisterDialog;
      },
      set(value) {
        this.$emit("registerDialogClosed");
      },
    },
  },
  data() {
    // 验证邮箱规则
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      // 验证邮箱的正则表达式
      const regEmail =
        /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/;
      if (regEmail.test(value)) {
        // 合法邮箱
        return callback();
      }
      callback(new Error("请输入合法的邮箱"));
    };
    // 验证只能是数字和字母
    var validNumLetter = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/;
      if (!reg.test(value)) {
        callback(new Error("必须是由4-20位字母+数字组合"));
      } else {
        callback();
      }
    };
    // 验证两次密码是否一致
    var checkPasswordSave = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }
      if (this.registerForm.password === this.registerForm.password2) {
        return callback();
      }
      callback(new Error("请输入一致的密码"));
    };
    return {
      // 左侧文本的宽度
      formLabelWidth: "80px",
      // 控制注册表单的显示与否
      //   registerDialogFormVisible: true,
      // 注册的表单数据
      registerForm: {
        // 昵称
        nickname: "",
        // 账号
        username: "",
        password: "",
        password2: "",
        mail: "",
      },
      // 注册表单的验证规则
      registerFormRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { validator: validNumLetter, trigger: "blur" },
        ],
        nickname: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
          {
            min: 4,
            max: 20,
            message: "用户昵称长度在 4 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validNumLetter, trigger: "blur" },
        ],
        password2: [
          { required: true, message: "两次密码不一致", trigger: "blur" },
          { validator: checkPasswordSave, trigger: "blur" },
        ],
        mail: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //   注册用户
    registerUser() {
      this.$refs.registerFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起注册新用户的网络请求
        const { code } = await this.$http.post(
          "/api/user/create",
          this.registerForm
        );
        if (code != 200) {
          // 隐藏注册用户的对话框;
          this.$emit("registerDialogClosed");
          return this.$message("发送邮箱失败");
        }
        // 隐藏注册用户的对话框;
        this.$emit("registerDialogClosed");
        this.$alert("已发送激活码到你的邮箱，请前去激活！", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            console.log(action);
          },
        });
      });
    },
    // 重置表单
    resetRegisterForm() {
      this.$refs.registerFormRef.resetFields();
    },
    // 注册对话框关闭事件
    registerDialogClosed() {
      this.$refs.registerFormRef.resetFields();
      this.$emit("registerDialogClosed");
    },
  },
};
</script>

<style scoped lang="less">
.dialog-footer {
  .register-wrap {
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    font-weight: 540;
    .register {
      width: 120px;
      background-color: #ffa00a;
      text-align: center;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      border-radius: 10px;
    }
  }
  .reset-wrap {
    width: 100%;
    font-weight: 550;
    display: flex;
    justify-content: center;
    .reset {
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      color: #939393;
    }
  }
}
</style>